 <template>
 <!--按钮 begin-->
 <div style="padding:10px 20px;" class="overflowY">
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="primary" icon="el-icon-share">分享</el-button>
        <el-button type="primary" icon="el-icon-delete">删除</el-button>
      </el-button-group>
    </el-row>
    <base-card title="说明">
      <code style="margin-top: 15px;">
      <span>1、提供了6种可选type改变样式
               <span style="display: inline-block;width: 100%;">primary -- 主要按钮</span>
               <span style="display: inline-block;width: 100%;">success -- 成功按钮</span>
               <span style="display: inline-block;width: 100%;">info -- 信息按钮</span>
               <span style="display: inline-block;width: 100%;">warning -- 警告按钮</span>
               <span style="display: inline-block;width: 100%;">danger -- 危险按钮</span>
      </span>
        <span>2、plain 改变按钮是否有背景填充色</span>
        <span>3、round 改变按钮圆角</span>
      </code>
    </base-card>
    <base-card title="HTML">
      <pre><code>    &lt;el-row style="margin-top: 20px;"&gt;<br>      &lt;el-button plain&gt;朴素按钮&lt;/el-button&gt;<br>      &lt;el-button type="primary" plain&gt;主要按钮&lt;/el-button&gt;<br>      &lt;el-button type="success" plain&gt;成功按钮&lt;/el-button&gt;<br>      &lt;el-button type="info" plain&gt;信息按钮&lt;/el-button&gt;<br>      &lt;el-button type="warning" plain&gt;警告按钮&lt;/el-button&gt;<br>      &lt;el-button type="danger" plain&gt;危险按钮&lt;/el-button&gt;<br>    &lt;/el-row&gt;<br>    &lt;el-row style="margin-top: 20px;"&gt;<br>      &lt;el-button round&gt;圆角按钮&lt;/el-button&gt;<br>      &lt;el-button type="primary" round&gt;主要按钮&lt;/el-button&gt;<br>      &lt;el-button type="success" round&gt;成功按钮&lt;/el-button&gt;<br>      &lt;el-button type="info" round&gt;信息按钮&lt;/el-button&gt;<br>      &lt;el-button type="warning" round&gt;警告按钮&lt;/el-button&gt;<br>      &lt;el-button type="danger" round&gt;危险按钮&lt;/el-button&gt;<br>    &lt;/el-row&gt;<br>    &lt;el-row style="margin-top: 20px;"&gt;<br>      &lt;el-button-group&gt;<br>        &lt;el-button type="primary" icon="el-icon-edit"&gt;编辑&lt;/el-button&gt;<br>        &lt;el-button type="primary" icon="el-icon-share"&gt;分享&lt;/el-button&gt;<br>        &lt;el-button type="primary" icon="el-icon-delete"&gt;删除&lt;/el-button&gt;<br>      &lt;/el-button-group&gt;<br>    &lt;/el-row&gt;</code></pre>
    </base-card>
  </div>
   <div>
     <el-row>
       <el-button>默认按钮</el-button>
       <el-button size="medium">中等按钮</el-button>
       <el-button size="small">小型按钮</el-button>
       <el-button size="mini">超小按钮</el-button>
     </el-row>
     <base-card title="说明">
       <code style="margin-top: 15px;">
      <span>1、提供了3种按钮尺寸（默认大小不需要填写）
               <span style="display: inline-block;width: 100%;">medium -- 中等按钮</span>
               <span style="display: inline-block;width: 100%;">small -- 小型按钮</span>
               <span style="display: inline-block;width: 100%;">mini -- 超小按钮</span>
      </span>
       </code>
     </base-card>
     <base-card title="HTML">
       <pre><code><p>&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-row&gt;<br>       &lt;el-button&gt;默认按钮&lt;/el-button&gt;<br>       &lt;el-button size="medium"&gt;中等按钮&lt;/el-button&gt;<br>       &lt;el-button size="small"&gt;小型按钮&lt;/el-button&gt;<br>       &lt;el-button size="mini"&gt;超小按钮&lt;/el-button&gt;<br>     &lt;/el-row&gt;</p></code></pre>
     </base-card>
   </div>
 </div>
 <!--按钮 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  }
}
</script>

